<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		onClose: {
			type: Function,
			required: true
		},
		onSelect: {
			type: Function,
			required: true
		}
	})
	const activeAnchor = ref('数据库')

	const connectorTypes = {
		数据库: [
			{ key: 'MYSQL', title: 'MySQL', icon: 'mysql.png' },
			{ key: 'mongodb', title: 'MongoDB', icon: 'mongodb-logo.svg' },
			{ key: 'db2', title: 'Db2', icon: 'db2-logo.svg' },
			{ key: 'mariadb', title: 'MariaDB', icon: 'mariadb-logo.svg' },
			{ key: 'oracle', title: 'Oracle', icon: 'oracle-logo.svg' },
			{ key: 'postgresql', title: 'PostgreSQL', icon: 'postgresql-logo.svg' }
		],
		API连接器: [
			{ key: 'LOCAL_API', title: '本地API', icon: 'api-logo.svg', description: '连接项目内部API接口' },
			{ key: 'EXTERNAL_API', title: '外部API', icon: 'api-external-logo.svg', description: '连接外部HTTP API接口' }
		],
		其他: [{ key: 'excel', title: 'EXCEL', icon: 'excel-logo.svg' }]
	}

	// 支持的连接器类型（只有这些可以正常使用）
	const supportedConnectors = ['MYSQL', 'LOCAL_API', 'EXTERNAL_API']

	// 生成锚点链接
	const generateAnchorLinks = () => {
		const links = []
		for (const category in connectorTypes) {
			links.push({
				key: category,
				title: category,
				href: `#${category}`
			})
		}
		return links
	}

	const handleSelect = (type) => {
		// 检查是否为支持的连接器类型
		if (!supportedConnectors.includes(type.key)) {
			message.info('该数据库连接器功能开发中，敬请期待！')
			return
		}

		// 只有支持的连接器才执行原有逻辑
		props.onSelect(type)
		props.onClose()
	}
</script>

<template>
	<a-modal :footer="null" :open="visible" title="新建数据源" width="800px" @cancel="onClose">
		<div class="flex flex-col h-[500px]">
			<!-- 左侧锚点导航 -->
			<div class="w-full border-r pr-4">
				<a-anchor
					:target-offset="20"
					direction="horizontal"
					v-model:current-link="activeAnchor"
					:items="generateAnchorLinks()"
				/>
			</div>
			<!-- 右侧连接器类型列表 -->
			<div class="flex-1 pl-6 overflow-y-auto mt-2">
				<div v-for="(types, category) in connectorTypes" :key="category" :id="category" class="mb-8">
					<h3 class="text-lg font-medium mb-4">{{ category }}</h3>
					<div class="grid grid-cols-4 gap-4">
						<div
							v-for="type in types"
							:key="type.key"
							class="p-4 border rounded-lg cursor-pointer hover:border-primary hover:shadow-md transition-all"
							:class="{
								'opacity-60': !supportedConnectors.includes(type.key)
							}"
							@click="handleSelect(type)"
						>
							<div class="h-12 flex items-center justify-center mb-2">
								<img :src="`/img/connector/${type.icon}`" :alt="type.title" class="h-8" />
							</div>
							<div class="text-center">
								{{ type.title }}
								<div v-if="!supportedConnectors.includes(type.key)" class="text-xs text-gray-400 mt-1">开发中</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<style scoped>
	.ant-anchor {
		padding-right: 0;
	}
</style>
